<template>
  <div class="add-edit-sku">
    <!-- 提示 -->
    <div class="add-edit-sku-hint">
      <div class="add-edit-sku-hint-item">
        <div class="add-edit-sku-hint-name">
          <i class="el-icon-warning"></i> 1.SKU在成品导出后按规则进行生成
        </div>
        <div class="add-edit-sku-hint-name">
          <span></span>
          3.SKU只能含有英文、数字、-、_4种字符类型，长度控制在40个字符以内最佳
        </div>
      </div>
      <div class="add-edit-sku-hint-item">
        <div class="add-edit-sku-hint-name">
          <span v-text="'2.SKU中必须含<end_product_id>'"></span>
        </div>
        <div class="add-edit-sku-hint-name">
          <span v-text="'4.母体中不可带<color_name>或<size_name>'"></span>
        </div>
      </div>
    </div>
    <div class="add-edit-sku-input">
      <div class="add-edit-sku-input-name">
        <span>*</span> <span>规则名称:</span>
      </div>
      <div class="add-edit-sku-input-data">
        <el-input placeholder="请输入内容" v-model="ruleValue" clearable>
        </el-input>
      </div>
      <div class="add-edit-sku-input-active"></div>
    </div>
    <!-- 组合商品 -->
    <div class="sku-group-shop">
      <div class="sku-group-shop-title">组合商品</div>
      <div class="sku-group-shop-item">
        <div class="add-edit-sku-input">
          <div class="add-edit-sku-input-name">
            <span>*</span> <span>母体SKU:</span>
          </div>
          <div class="add-edit-sku-input-data">
            <el-input
              placeholder="请输入内容"
              v-model="parentSkuValue"
              disabled
              clearable
            >
            </el-input>
          </div>
          <div class="add-edit-sku-input-active">插入属性</div>
        </div>
        <div class="add-edit-sku-input">
          <div class="add-edit-sku-input-name">
            <span>*</span> <span>变体SKU:</span>
          </div>
          <div class="add-edit-sku-input-data">
            <el-radio-group v-model="radio">
              <el-radio
                @change="onChangeRadio"
                :label="matrix.id"
                v-for="(matrix, matrixIdx) in matrixSkuData"
                :key="matrixIdx"
                ><span v-text="matrix.name"></span
              ></el-radio>
              <!-- <el-radio :label="2">母体下按变体顺序从1开始自增</el-radio>
              <el-radio :label="3">与母体规则一致</el-radio> -->
            </el-radio-group>
          </div>
          <div class="add-edit-sku-input-active"></div>
        </div>
      </div>
    </div>
    <!-- 简单商品 -->
    <div class="sku-simpleness-shop">
      <div class="sku-simpleness-shop-title">简单商品</div>
      <div class="sku-simpleness-shop-item">
        <div class="add-edit-sku-input">
          <div class="add-edit-sku-input-name">
            <span>*</span> <span>SKU:</span>
          </div>
          <div class="add-edit-sku-input-data">
            <el-input
              placeholder="请输入内容"
              disabled
              v-model="shopValue"
              clearable
            >
            </el-input>
          </div>
          <div class="add-edit-sku-input-active">插入属性</div>
        </div>
      </div>
    </div>
    <!-- 组合商品实列(sku根据规则实时变动) -->
    <div class="sku-group-instantiation">
      <div class="sku-group-instantiation-title">
        组合商品实例(SKU根据规则实时变动):
      </div>
      <div class="sku-group-instantiation-name">字段信息</div>
      <div class="sku-group-instantiation-table">
        <el-table :data="[1]" border style="width: 100%">
          <el-table-column label="<shop_code>" width="200">
            <template>
              <span>diy</span>
            </template>
          </el-table-column>
          <el-table-column label="<site>" width="200">
            <template>
              <span>US</span>
            </template>
          </el-table-column>
          <el-table-column label="<product_name_code>">
            <template>
              <span>CP</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 不晓得啥子设计页面 -->
    <div class="sku-group-what">
      <div class="sku-group-what-list">
        <div class="sku-group-what-list-name">
          <span v-text="'<end_product_id>'"></span>
        </div>
        <div class="sku-group-what-list-content">
          <span v-text="'<color_name>-<size_name>'"></span>
        </div>
        <div class="sku-group-what-list-sku"></div>
      </div>
      <div class="sku-group-what-list">
        <div class="sku-group-what-list-name">母体:65num88</div>
        <div class="sku-group-what-list-content"></div>
        <div class="sku-group-what-list-sku">
          <span>SKU:</span>
          <el-input
            placeholder="请输入内容"
            v-model="matrixSkuValue"
            :disabled="true"
          >
          </el-input>
        </div>
      </div>
      <div class="sku-group-what-list">
        <div class="sku-group-what-list-name">变体:62356m8k</div>
        <div class="sku-group-what-list-content">yellow1-22*32cm</div>
        <div class="sku-group-what-list-sku">
          <span>SKU:</span>
          <el-input
            placeholder="请输入内容"
            v-model="variantkValue"
            :disabled="true"
          >
          </el-input>
        </div>
      </div>
      <div class="sku-group-what-list">
        <div class="sku-group-what-list-name">变体:62356m4o</div>
        <div class="sku-group-what-list-content">yellow1-22*32cm</div>
        <div class="sku-group-what-list-sku">
          <span>SKU:</span>
          <el-input
            placeholder="请输入内容"
            v-model="variantoValue"
            :disabled="true"
          >
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sku from '@/api/sku';
import Way from '@/utils/way';

export default {
  name: 'addEditSku',
  components: {},
  props: {
    editSku: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      ruleValue: '', // 规则名称
      parentSkuValue: '<shop_code>-<end_product_id>', // 母体SKU
      shopValue: '<shop_code>-<end_product_id>', // 简单商品sku
      radio: 1,
      matrixSkuData: [
        {
          id: 1,
          name: '母体SKU-<color_name>-<size_name>',
          variantk: 'diy-65num88-yellow1-2223cm',
          varianto: 'diy-65num88-yellow2-2225cm',
        },
        {
          id: 2,
          name: '母体下按变体顺序从1开始自增',
          variantk: 'diy-65num88-1',
          varianto: 'diy-65num88-2',
        },
        {
          id: 3,
          name: '与母体规则一致',
          variantk: 'diy-62356m8k',
          varianto: 'diy-62356m4o',
        },
      ],
      matrixSkuValue: 'diy-65num88', // 母体
      variantkValue: 'diy-65num88-yellow1-2223cm', // 变体1
      variantoValue: 'diy-65num88-yellow2-2225cm', // 变体2
    };
  },
  computed: {},
  watch: {
    editSku(val) {
      if (Object.keys(val).length) {
        this.ruleValue = val.rule_name;
        this.parentSkuValue = val.parent_sku;
        this.radio = val.variant_sku;
        this.shopValue = val.simple_sku;
        this.onChangeRadio(val.variant_sku);
      } else {
        this.init();
      }
    },
  },
  created() {
    if (Object.keys(this.editSku).length) {
      this.ruleValue = this.editSku.rule_name;
      this.parentSkuValue = this.editSku.parent_sku;
      this.radio = this.editSku.variant_sku;
      this.shopValue = this.editSku.simple_sku;
      this.onChangeRadio(this.editSku.variant_sku);
    } else {
      this.init();
    }
  },
  methods: {
    // 单选框change事件
    onChangeRadio(val) {
      const index = this.matrixSkuData.findIndex((oj) => oj.id == val);
      if (index == -1) return;
      const matrixSkuData = this.matrixSkuData[index];
      this.variantkValue = matrixSkuData.variantk;
      this.variantoValue = matrixSkuData.varianto;
    },

    // 保存新增或者编辑sku
    addEditConfig() {
      const editSku = this.editSku;
      let params = {
        rule_name: this.ruleValue,
        parent_sku: this.parentSkuValue,
        variant_sku: this.radio,
        simple_sku: this.shopValue,
      };
      if (Object.keys(editSku).length) {
        params.id = editSku.id;
        Sku.postSkutempEdit(params).then((res) => {
          if (res.code == 200) {
            this.$emit('closeDialogSku', false);
            Way.setMessage('修改成功', 1);
            this.init();
          } else {
            Way.setMessage(res.msg, 3);
          }
        });
      } else {
        Sku.postSkutempAdd(params).then((res) => {
          if (res.code == 200) {
            this.$emit('closeDialogSku', false);
            Way.setMessage('新增成功', 1);
            this.init();
          } else {
            Way.setMessage(res.msg, 3);
          }
        });
      }
    },

    // 初始化
    init() {
      this.ruleValue = '';
      this.radio = 1;
      this.matrixSkuValue = 'diy-65num88';
      this.variantkValue = 'diy-65num88-yellow1-2223cm'; // 变体1
      this.variantoValue = 'diy-65num88-yellow2-2225cm'; // 变体2
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.add-edit-sku {
  // 提示
  .add-edit-sku-hint {
    display: flex;
    border-radius: 4px;
    padding: 5px;
    border: 1px solid rgb(255, 158, 105);
    background-color: rgb(255, 248, 244);

    .add-edit-sku-hint-item {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .add-edit-sku-hint-name {
      font-size: 12px;
      padding-bottom: 6px;

      i {
        color: rgb(255, 158, 105);
      }
      span {
        padding-right: 16px;
      }
    }
  }
  .add-edit-sku-input {
    display: flex;
    align-items: center;
    padding-top: 12px;

    .add-edit-sku-input-name {
      span {
        &:nth-child(1) {
          color: #f00000;
        }
        &:nth-child(2) {
          font-weight: 700;
          padding-right: 12px;
        }
      }
    }
    .add-edit-sku-input-data {
      flex: 1;

      .el-radio-group {
        display: flex;
        flex-direction: column;

        .el-radio {
          padding: 5px 0;
        }
      }
    }

    .add-edit-sku-input-active {
      font-size: 14px;
      width: 120px;
      text-align: center;
    }
  }
  // 组合商品
  .sku-group-shop {
    .sku-group-shop-title {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
      font-size: 16px;
    }
  }
  // 简单商品
  .sku-simpleness-shop {
    .sku-simpleness-shop-title {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
      font-size: 16px;
    }
  }
  // 组合商品实列(sku根据规则实时变动)
  .sku-group-instantiation {
    .sku-group-instantiation-title {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
      font-size: 16px;
    }
    .sku-group-instantiation-name {
      height: 35px;
      line-height: 35px;
    }
  }
  // 不晓得啥子设计页面
  .sku-group-what {
    padding-top: 12px;

    .sku-group-what-list {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .sku-group-what-list-name {
        width: 200px;
      }

      .sku-group-what-list-content {
        width: 200px;
      }

      .sku-group-what-list-sku {
        display: flex;
        align-items: center;
        flex: 1;

        span {
          width: 40px;
        }

        .el-input {
          flex: 1;
        }
      }
    }
  }
}
</style>
